<template>
  <div class="container">
    <div class="details">
      <div class="res" v-show="!nodata">
        <p> 您<span :style="{ color: '#0000ff', margin: '0 5px' }">{{ info.riqi }}</span>应发工资为<strong>{{
          totals == '' ? '0' : totals }}</strong>元
          (含应扣缴的社保和住房公积金等）详情信息如下:</p>
        <div class="clearfix">
          <ul class="label">
            <li>查询时间</li>
            <li>项目</li>
            <li>职务工资</li>
            <li>级别工资</li>
            <li>高套</li>
            <li>大中专学历浮动</li>
            <li>五年浮动</li>
            <li>大中专学历固定</li>
            <li>在藏工作20(15)年固定</li>
            <li>西藏特殊津贴倍数额</li>
            <li>西藏特殊津贴绝对额</li>
            <li>高海拔折算工龄补贴</li>
            <li>2021年基本工资增资额</li>
            <li>住房补贴</li>
            <li>其他</li>
          </ul>
          <ul>
             <li>{{ nowTime }}</li>
            <li>金额</li>  
            <li>{{ info.a == '' ? '0' : info.a }}</li>
            <li>{{ info.b == '' ? '0' : info.b }}</li>
            <li>{{ info.c == '' ? '0' : info.c }}</li>
            <li>{{ info.d == '' ? '0' : info.d }}</li>
            <li>{{ info.e == '' ? '0' : info.e }}</li>
            <li>{{ info.f == '' ? '0' : info.f }}</li>
            <li>{{ info.g == '' ? '0' : info.g }}</li>
            <li>{{ info.i == '' ? '0' : info.i }}</li>
            <li>{{ info.j == '' ? '0' : info.j }}</li>
            <li>{{ info.k == '' ? '0' : info.k }}</li>
            <li>{{ info.l == '' ? '0' : info.l }}</li>
            <li>{{ info.m == '' ? '0' : info.m }}</li>
            <li>{{ subsidy == '' ? '0' : subsidy }} <i v-if="subsidy > 0" class="more" @click="toggle">(详情)</i></li>
          </ul>
        </div>

        <div class="moreInfo" v-show="show">
          {{ info.n }}
        </div>

      </div>

      <div class="noData" v-show="nodata">
        <p>
          您好，数据尚未更新，请您月底以后再来!
        </p>
      </div>
      <p class="remained">
        {{ retips }}
      </p>

    </div>

  </div>
</template>

<script>
import path from '../api/network.js'
export default {
  data() {
    return {
      info: '',
      totals: '',
      nodata: false,
      retips: localStorage.getItem("retips"),
      subsidy: 0,
      show: false,
      nowTime:''

    }
  },
  mounted() {
    this.getSals();
    this.getNowFormatDate()
  },
  methods: {

    toggle() {
      this.show = !this.show;

    },
    //获取list
    getSals() {
      path.getSal().then(res => {
        if (!res || res.status !== 200) {
          // 处理res或res.status为空的情况...  
          return;
        }
       const dataRow = res.data.rows[0];
        if (!dataRow) {
          // 处理res为空的情况...    
          this.nodata = true;
          return;
        }
        this.info = dataRow;
         const n = this.info.n;
        if (!n) {
          this.totals = Number(this.info.a) + Number(this.info.b) + Number(this.info.c) + Number(this.info.d) + Number(this.info.e) + Number(this.info.f) + Number(this.info.g)
          + Number(this.info.i) + Number(this.info.j) + Number(this.info.k) + Number(this.info.l) + Number(this.info.m) + this.subsidy
     
          return;
        }
        const items = n.split(/[,，]/).filter(Boolean); // 使用正则表达式支持 ',' 和 '，' 作为分隔符    
        // console.log('items===>', items)
        var flag = 0;
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          const parts = item.split(/[:,：]/).filter(Boolean);
          if (parts.length > 1 && isNaN(parts[1].trim())) {
            flag = -1;
          }

        }

        var subsidy = 0;
        if (flag != -1) {
          subsidy = items.reduce((total, item) => {
            const parts = item.split(/[:,：]/).filter(Boolean);
            // 使用正则表达式支持 ':' 和 '：' 作为分隔符    
            if (parts.length > 1 && !isNaN(parts[1].trim())) {  // 检查 parts[1].trim() 是否可以转化为数字  
              return total + Number(parts[1].trim());
            }
            return total;
          }, 0);
        }
        this.subsidy = subsidy;

        this.totals = Number(this.info.a) + Number(this.info.b) + Number(this.info.c) + Number(this.info.d) + Number(this.info.e) + Number(this.info.f) + Number(this.info.g)
          + Number(this.info.i) + Number(this.info.j) + Number(this.info.k) + Number(this.info.l) + Number(this.info.m) + this.subsidy
      });
    },

     getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      var currentdate = year + '年' + month + '月' + day+'日';
      this.nowTime=currentdate
    }
   




  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.details {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.res {
  font-size: 30px;
  margin: 0 40px;
  line-height: 1.5;
  text-align: justify;
  background: #fff;
  border-radius: 10px;
  box-shadow: 2px -5px 10px #ccc;
  padding: 20px;
}

.remained {
  text-align: center;
  color: #000;
  font-size: 28px;
  position: absolute;
  bottom: 20px;
  font-weight: 500;
  margin: 0 30px;
  background: #Fff;
  text-align: justify;
  padding: 10px;
}

.res ul {
  float: left;
  text-align: center;
}

.res ul li {
  border: 1px solid #ccc;
  height:46px;
  line-height: 46px;
}

.res .label {
  width: 70%;
}

.res>ul:last-child {
  width: 30%;
}

.res .more {
  font-size: 26px;
  font-style: normal;
  color: #a32017;
}

.moreInfo {
  font-size: 26px;
  text-align: justify;
}
</style>
